<template>
  <div class="search">
    <el-card v-if="isQuery">
      <el-form :inline="true" :label-width="searchConfig.labelWidth" :model="searchForm" ref="formRef">
        <!-- element-plus 中不需要使用多个el-row进行换行，当el-row中的el-col在一行显示不下时，会自动换行 -->
        <el-row :gutter="30">
          <template v-for="item in searchConfig.formItems" :key="item.prop">
            <template v-if="item.span">
              <el-col :span="item.span">
                <template v-if="item.type === 'input'">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <el-input v-model="searchForm[item.prop]" :placeholder="item.placeholder" />
                  </el-form-item>
                </template>

                <template v-if="item.type === 'date-picker'">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <el-date-picker
                      v-model="searchForm[item.prop]"
                      :type="item.timeType"
                      :range-separator="item.rangeSeparator"
                      :start-placeholder="item.startPlaceholder"
                      :end-placeholder="item.endPlaceholder"
                      :format="item.format"
                      :value-format="item.valueFormat"
                    />
                  </el-form-item>
                </template>

                <template v-if="item.type === 'select'">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <el-select v-model="searchForm[item.prop]" :placeholder="item.placeholder">
                      <template v-for="(option, index) in item.options" :key="index">
                        <el-option :value="option.value" :label="option.label" />
                      </template>
                    </el-select>
                  </el-form-item>
                </template>
              </el-col>
            </template>

            <template v-else>
              <el-col :lg="item.lg" :md="item.md" :sm="item.sm">
                <template v-if="item.type === 'input'">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <el-input v-model="searchForm[item.prop]" :placeholder="item.placeholder" />
                  </el-form-item>
                </template>

                <template v-if="item.type === 'date-picker'">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <el-date-picker
                      v-model="searchForm[item.prop]"
                      :type="item.timeType"
                      :range-separator="item.rangeSeparator"
                      :start-placeholder="item.startPlaceholder"
                      :end-placeholder="item.endPlaceholder"
                      :format="item.format"
                      :value-format="item.valueFormat"
                    />
                  </el-form-item>
                </template>

                <template v-if="item.type === 'select'">
                  <el-form-item :label="item.label" :prop="item.prop">
                    <el-select v-model="searchForm[item.prop]" :placeholder="item.placeholder">
                      <template v-for="(option, index) in item.options" :key="index">
                        <el-option :value="option.value" :label="option.label" />
                      </template>
                    </el-select>
                  </el-form-item>
                </template>
              </el-col>
            </template>
          </template>
        </el-row>

        <el-row justify="end">
          <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
          <el-button type="primary" icon="Search" @click="handleQueryClick" v-if="isQuery">搜索</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import type { FormInstance } from 'element-plus'
  import { reactive, ref } from 'vue'
  import type { IFormItem } from '.'
  import { usePermission } from '@/hooks/usePermission'

  interface IProp {
    searchConfig: {
      pageName: string
      labelWidth?: string
      formItems: IFormItem[]
    }
  }

  const $props = withDefaults(defineProps<IProp>(), {})
  const $emits = defineEmits(['queryClick', 'resetClick'])

  const { isQuery } = usePermission($props.searchConfig.pageName)
  const formRef = ref<FormInstance>()
  // 初始化表单数据
  const initalForm: any = {}
  for (const item of $props.searchConfig.formItems) {
    initalForm[item.prop] = item.initalValue ?? ''
  }
  const searchForm = reactive<any>(initalForm)

  // 重置
  function handleResetClick() {
    // 使用resetFields，必须指定每一个el-form-item中prop属性
    formRef.value?.resetFields()
    $emits('resetClick', searchForm)
  }
  // 查询
  function handleQueryClick() {
    $emits('queryClick', searchForm)
  }
</script>

<style lang="scss" scoped>
  .search {
    .el-form-item {
      width: 100%;
    }
  }
</style>

<style lang="scss"></style>
